<template>
<!-- 博文详情页 -->
  <div class="details_warp public">
    <div class="public_left">
        <div class="leaf">
            <div>富强</div>
            <div>民主</div>
            <div>文明</div>
            <div>和谐</div>
            <div>爱国</div>
            <div>敬业</div>
            <div>平等</div>
            <div>自由</div>
        </div>
    </div>
    <div class="public_right">
      <div class="details_nav">
        <div class="details_nav_title">{{blogerMsg.title}}</div>
        <div class="details_nav_user">
          <span class="el-icon-s-custom"></span>
          <span>{{blogerMsg.user_id}}</span>
          <span class="el-icon-time"></span>
          <span>{{blogerMsg.created_at}}</span>
        </div>
      </div>
      <div class="details_cont" v-html='blogerMsg.content'></div>
    </div>

  </div>
</template>

<script>
export default {
  data(){
    return {
      // msg:{
      //   user_name: '噗噗噗哥',
      //   add_time: '2019-08-02 08:02:59',
      //   title: '测试文字标题',
      //   content: '<div>擦擦啊擦擦擦啊擦</div>',
      // },
      blogerMsg:{}
    }
  },
  methods:{
    getContent(){
      let newID = this.$route.query.id
      // console.log(newID)
      this.$http.get('http://blog.com/api/api/detail?id='+newID).then((result) => {
        this.blogerMsg = result.data.data[0]
        // console.log(this.blogerMsg)
     })
    }
  },
  created(){
    this.getContent();
  }
}
</script>

<style>
.details_warp{
  height: 300px;;
}
.details_warp>div{
  min-height: 100px;
}
.details_nav_title{
  margin: 20px 0;
  font-size: 19px;
  /* font-weight: 600; */
  color: #3e40bd;
}
.details_nav_user{
  padding: 8px 0;
  border-top:1px dashed #949393;
  border-bottom:1px dashed #949393;
  margin-bottom: 14px;
}
.details_nav_user > span{
  margin-left: 8px;
  color: #975252;
  font-size: 13px;
}
.el-icon-time{
  margin-left: 40px !important;
}
.details_cont{
  padding:0 8px;
  text-align: left;
  line-height: 1.5em;
  padding-bottom: 30px;
}
.leaf ::after{
  content: '';
  display: block;
  clear: both;
}
.leaf > div{
  float: left;
  width: 40%;
  height: 42px;
  margin: 4.5%;
  color: #fff;
  line-height: 42px;
  border-radius: 6px;
  cursor: pointer;
}
.leaf > div:nth-of-type(1){
  background-color: #85c77d;
}
.leaf > div:nth-of-type(2){
  background-color: #7dc7c1;
}
.leaf > div:nth-of-type(3){
  background-color: #7d9dc7;
}
.leaf > div:nth-of-type(4){
  background-color: #ac7dc7;
}
.leaf > div:nth-of-type(5){
  background-color: #c7c07d;
}
.leaf > div:nth-of-type(6){
  background-color: #7dc793;
}
.leaf > div:nth-of-type(7){
  background-color: #c77d99;
}
.leaf > div:nth-of-type(8){
  background-color: #32795b;
}
</style>